<template>
    <div>
        <!-- 导航 -->
        <nav class="ui inverted attached segment m-padding-tb-mini m-shadow-small"
             style="padding-top: 0 !important; padding-bottom: 0 !important">
            <div class="ui container m-container" style="padding-top: 0 !important; padding-bottom: 0 !important">
                <div class="ui inverted secondary stackable menu m-padding-tb-mini"
                     style="padding-top: 0 !important; padding-bottom: 0 !important">
                    <h3 class="ui teal header item">Blog</h3>
                    <router-link class="m-item item m-mobile-hide " to="/index">
                        <div><i class=" home icon"></i>首页</div>
                    </router-link>
                    <router-link class="m-item item m-mobile-hide " to="/types">
                        <div><i class=" idea icon"></i>分类</div>
                    </router-link>
                    <router-link class="m-item item m-mobile-hide " to="/tags">
                        <div><i class=" tags icon"></i>标签</div>
                    </router-link>
                    <router-link class="m-item item m-mobile-hide " to="/archives">
                        <div><i class=" clone icon"></i>归档</div>
                    </router-link>
                    <router-link class="m-item item m-mobile-hide " to="/about">
                        <div><i class=" info icon"></i>关于我</div>
                    </router-link>
                    <div class="menu right m-item m-mobile-hide">
                        <div class="ui dropdown item" style="width: 150px !important;">
                            <div class="text">
                                <img src="../assets/image/jenny.jpg" alt="" class="ui image avatar"> 李欢
                            </div>
                            <i class="icon dropdown"></i>
                            <div class="menu">
                                <a href="#" class="item basic"><i class="icon user"></i> 个人信息</a>
                                <a href="#" class="item basic"><i class="icon help"></i> 帮助</a>
                                <a href="#" class="item basic"><i class="icon logout"></i> 注销</a>
                                <a href="#" class="item basic"><i class="icon quit"></i> 退出</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui menu toggle black icon button m-right-top m-mobile-show" style="margin-top: 4px !important">
                <i class="sidebar icon"></i>
            </div>
        </nav>
    </div>
</template>

<script>
    export default {
        name: "AdminNav",
        mounted() {

            // 导航菜单
            $(this.$el).find('.menu.toggle').click(function () {
                $('.m-item').toggleClass('m-mobile-hide');
            });

            // 控制类别下拉菜单
            $(this.$el).find('.ui.dropdown').dropdown({
                on: "hover"
            })
        }
    }
</script>

<style scoped>

</style>
